/*
 * @Author: error: git config user.name & please set dead value or install git
 * @Date: 2024-11-16 17:36:23
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-11-19 13:09:54
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name}, All Rights Reserved. 
 */
interface DataColProps {
  title: string;
  value: number;
}

interface StatsProps {
  total: DataColProps;
  allow: DataColProps;
  doing: DataColProps;
  finished: DataColProps;
}

function DataCol(props: DataColProps) {
  return (
      <div className="flex w-1/2 md:w-1/4 p-2">
        <div className="bg-black px-4 py-4 rounded-sm flex flex-col w-full">
          <div className="text-8 leading-140 mb-4 text-7b md:text-14">
            {props.title}
          </div>
          <div className="text-18 text-ff leading-140 md:text-30">
            <span className="text-12 md:text-20 mr-1">$</span>
            {props.value}
          </div>
        </div>
      </div>
  );
}

function Stats({ total, allow, doing, finished }: StatsProps) {
  return (
    <div className="flex w-full  flex-wrap flex-row justify-between">
      <DataCol {...total} />
      <DataCol {...allow} />
      <DataCol {...doing} />
      <DataCol {...finished} />
    </div>
  );
}

export default Stats;
